<script setup>
import { defineEmits, ref, onMounted } from 'vue'
import { userLevelAPI } from '@/api'

// 输出：创建/加入房间两个操作按钮事件
const emit = defineEmits(['create-room', 'join-room'])

const leaderboard = ref([])
onMounted(async () => {
  try {
    const res = await userLevelAPI.getLeaderboard({ meta: { silent: true } })
    const data = (res && 'code' in res) ? (res.data || []) : (res?.data || res)
    leaderboard.value = Array.isArray(data) ? data : []
  } catch (_) {
    leaderboard.value = []
  }
})
</script>

<template>
  <div class="action-section">
    <div class="action-buttons">
      <button class="action-btn create-btn" @click="emit('create-room')">
        <span class="btn-text">创建房间</span>
      </button>
      <button class="action-btn join-btn" @click="emit('join-room')">
        <span class="btn-text">加入房间</span>
      </button>
      <div class="leaderboard" v-if="leaderboard.length">
        <div class="lb-header">等级排行榜</div>
        <div class="lb-body">
          <ul class="lb-list">
            <li
              v-for="(u, i) in leaderboard"
              :key="u.userId || (u.id || i)"
              :class="['lb-item', `rank-${i+1}`, i < 3 ? 'top' : '']"
            >
              <span class="medal">{{ i + 1 }}</span>
              <span class="name" :title="u.userName || u.username">{{ u.userName || u.username }}</span>
              <span class="level-pill">LV. {{ u.currentLevel ?? u.level ?? '-' }}</span>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped>
.action-section {
  background: #f9fafb;
  border-radius: 12px;
  padding: 12px; /* 上移按钮区域，减小内边距 */
  border: 1px solid #e5e7eb;
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

.action-buttons {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
}

.action-btn {
  width: 100%;
  padding: 16px 20px;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  background: white;
  cursor: pointer;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  font-weight: 600;
}

.action-btn.create-btn { margin-top: -10px; }

.action-btn:hover { border-color: #3b82f6; background: #eff6ff; }
.create-btn:hover { border-color: #3b82f6; background: #eff6ff; }
.join-btn:hover { border-color: #10b981; background: #ecfdf5; }

.btn-text { font-size: 14px; font-weight: 600; color: #374151; }

.leaderboard { margin-top: 12px; background: #ffffff; border: 1px solid #e5e7eb; border-radius: 10px; overflow: hidden; }
.lb-header { padding: 10px 12px; font-size: 13px; font-weight: 800; color: #111827; border-bottom: 1px solid #eef2f7; background: #f8fafc; }
.lb-body { max-height: 260px; overflow: auto; }
.lb-list { list-style: none; margin: 0; padding: 6px 0; display: flex; flex-direction: column; gap: 4px; }

/* 自定义滚动条（仅限支持的浏览器） */
.lb-body { scrollbar-width: thin; scrollbar-color: #cbd5e1 transparent; }
.lb-body::-webkit-scrollbar { width: 8px; }
.lb-body::-webkit-scrollbar-track { background: transparent; }
.lb-body::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 999px; }
.lb-item { position: relative; display: grid; grid-template-columns: 32px 1fr auto; align-items: center; padding: 8px 12px; gap: 10px; border-radius: 10px; background: linear-gradient(180deg,#ffffff,#fafafa); border: 1px solid #eef2f7; transition: transform .15s ease, box-shadow .15s ease; }
.lb-item::before { content: ''; position: absolute; left: 0; top: 8px; bottom: 8px; width: 3px; border-radius: 2px; background: linear-gradient(180deg,#c7d2fe,#93c5fd); opacity: .6; }
.lb-item.top { box-shadow: 0 8px 24px rgba(2,6,23,.06); }
.lb-item:hover { transform: translateY(-1px); box-shadow: 0 10px 28px rgba(2,6,23,.08); }

.medal { width: 26px; height: 26px; border-radius: 8px; color: #fff; display: inline-flex; align-items: center; justify-content: center; font-weight: 900; font-size: 12px; background: linear-gradient(135deg,#64748b,#94a3b8); box-shadow: 0 2px 8px rgba(2,6,23,.15), inset 0 0 0 1px rgba(255,255,255,.18); }
.lb-item.rank-1 .medal { background: linear-gradient(135deg,#f59e0b,#ef4444); box-shadow: 0 0 18px rgba(245,158,11,.35), inset 0 0 0 1px rgba(255,255,255,.25); }
.lb-item.rank-2 .medal { background: linear-gradient(135deg,#cbd5e1,#94a3b8); box-shadow: 0 0 16px rgba(148,163,184,.35), inset 0 0 0 1px rgba(255,255,255,.25); }
.lb-item.rank-3 .medal { background: linear-gradient(135deg,#d97706,#b45309); box-shadow: 0 0 16px rgba(217,119,6,.35), inset 0 0 0 1px rgba(255,255,255,.25); }

.name { color: #0f172a; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; margin-right: 8px; font-weight: 800; letter-spacing: .2px; }
.level-pill { padding: 3px 8px; border-radius: 9999px; color: #ffffff; font-weight: 900; font-size: 10px; letter-spacing: .6px; background: linear-gradient(135deg,#22c55e,#06b6d4); text-transform: uppercase; box-shadow: 0 0 0 1px rgba(255,255,255,.2) inset, 0 4px 10px rgba(6,182,212,.25); }

@media (max-width: 768px) {
  .action-buttons { flex-direction: row; flex-wrap: wrap; gap: 12px; }
  .action-btn { padding: 12px 16px; font-size: 14px; flex: 1 1 calc(50% - 6px); min-width: 0; }
  .leaderboard { width: 100%; order: 3; }
  .leaderboard { margin-top: 14px; }
  .lb-body { max-height: 200px; }
}

@media (max-width: 480px) {
  .action-btn { flex-basis: 100%; }
}
</style> 